<template>
  <div>
    <!--  导航栏部分  -->
    <van-nav-bar class="van"
                 @click-left="back"
                 @click-right="show = true"
                 is-link
                 @click="show = true"
                 title="我的作品"
                 left-arrow>
      <template #right>
        <van-icon name="ellipsis" size="18"/>
      </template>
    </van-nav-bar>
    <!--  作品展示部分  -->
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <div style="background: white;">
            <!--  视频部分  -->
            <video controls class="image" :src="worksObject.videoUrl" alt="vedio"></video>
            <br>
            <!--  标题部分  -->
            <span class="span_1">{{ worksObject.tutorialName ? worksObject.tutorialName : "暂无标题" }}</span>
            <br>
            <!--  作者  和  指导老师  -->
            <span class="span_2">学生：{{
                worksObject.nickName
              }} / 指导老师：{{ worksObject.videoInstructor ? worksObject.videoInstructor : "暂无指导老师" }}</span>
            <!--  得分  -->
            <el-rate class="star"
                     v-model="worksObject.videoScore"
                     disabled
                     show-score
                     text-color="#ff9900"
                     :score-template="worksObject.number">
            </el-rate>
          </div>
          <!--  作品内容部分  -->
          <div class="content">
            {{ worksObject.tutorialIntroduct ? worksObject.tutorialIntroduct : "暂无作品内容" }}
          </div>

          <hr style="width: 93%;color: #E1E1E1">

          <!--  作品评语部分  -->
          <div class="last">
            <p class="span_3">作品评语</p>
            <br>
            <div class="comment">
              {{ worksObject.videoEvaluation ? worksObject.videoEvaluation : "暂无评语" }}
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!--  弹出层部分  -->
    <van-action-sheet v-model="show" title=" ">
      <div class="content">
        <div slot="custom" class="custom-wrap">
          <div @click="edit">
            <div class="detail"><i class="el-icon-edit-outline"></i></div>
            <span class="span_4">编辑作品</span>
          </div>
          <div @click="remove" class="delete">
            <div class="detail"><i class="el-icon-delete"></i></div>
            <span class="span_4">删除作品</span>
          </div>
        </div>
      </div>
    </van-action-sheet>

  </div>
</template>

<script>
import {
  Dialog,
  DialogMessageVerify,
  meassageError,
  meassageSuccess,
  vantNotifyDanger,
  vantNotifySuccess
} from "@/utils";
import {remove} from "@/api/request";

export default {
  name: 'index',
  data() {
    return {
      show: false,
      worksObject: {
        coverImg: '',//作品封面
        videoUrl: '',//作品视频
        nickName: '',//学生姓名
        videoInstructor: '',//指导老师
        tutorialIntroduct: '',//作品内容
        videoScore: 0,//小星星
        number: '',//个数评分
        tutorialName: '',//作品标题
        videoEvaluation: '',//作品评语
      },
    };
  },
  methods: {
    back() {
      this.$router.push("/videoMineH5")
    },
    edit() {
      this.$router.push({name: 'videoH5', query: {works: this.worksObject}})
      /*alert('item作品， 点击编辑')*/
    },
    remove() {
      DialogMessageVerify("删除作品？").then(() => {
        remove({id: this.worksObject.id}).then(res => {
          if (res.code === 200) {
            vantNotifySuccess(res.msg)
            this.$router.push("/videoMineH5")
          } else {
            vantNotifyDanger(res.msg)
          }
        })
      })

    },

  },
  mounted() {
    this.worksObject = this.$route.query.studentWorks ? this.$route.query.studentWorks : {}
  }

}
</script>


<style scoped>
/*布局样式*/
.grid-content {
  min-height: 36px;
}

/deep/ .van-nav-bar__title {
  font-size: 17px;
  font-weight: 500;
  color: #333333;
}

.van {
  height: 50px;
}

/deep/ .van-nav-bar .van-icon {
  color: #3D3D3D !important;
}

/deep/ .van-popup {
  max-height: 40%;
  background: #F6F6F6;
}

.delete {
  width: 100px;
  position: relative;
  top: -130px;
  left: 90px;
}

.span_4 {
  margin-left: 15px;
  font-size: 13px;
  font-weight: 400;
  color: #666666;
}

.el-icon-edit-outline, .el-icon-delete {
  position: relative;
  left: 15px;
  top: 12px;
}

.detail {
  position: relative;
  margin-top: 50px;
  margin-left: 16px;
  margin-bottom: 13px;
  color: #696969;
  font-size: 21px;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  background: white;
}

.custom-wrap {
  height: 180px;
  border-radius: 14px 14px 0 0;
}

.last {
  width: 375px;
  position: relative;
  left: 50%;
  transform: translate(-50%);
}

.comment {
  position: relative;
  left: 50%;
  transform: translate(-50%);
  width: 345px;
  border-radius: 10px;
  padding-left: 4px;
  padding-top: 9px;
  padding-bottom: 18px;
  margin-right: 15px;
  background: #F8F9FB;
  font-weight: 400;
  font-size: 14px;
  color: #999999;
}

.content {
  position: relative;
  left: 50%;
  transform: translate(-50%);
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  padding-left: 19px;
  padding-right: 14px;
  margin-top: 16px;
  margin-bottom: 18px;
  width: 342px;
}

.star {
  display: block;
  text-align: center;
  margin-top: 10px;
  margin-bottom: -5px;
}

.span_1 {
  display: block;
  text-align: center;
  font-weight: 700;
  font-size: 17px;
  color: #333333;
  margin-bottom: -15px;
}

.span_2 {
  display: block;
  text-align: center;
  font-weight: 400;
  font-size: 14px;
  color: #666666;
}

.span_3 {
  padding-left: 14px;
  margin-top: 28px;
  margin-bottom: -5px;
  font-weight: 500;
  font-size: 15px;
  color: #333333;
}

.image {
  position: relative;
  left: 50%;
  transform: translate(-50%);
  margin-top: 20px;
  margin-bottom: 10px;
  border-radius: 7px;
  width: 198px;
  height: 142px;
}
</style>
